// var
@scorebar-prefix-cls         : x-score-bar;
@scorebar-font-weight        : normal;
@scorebar-font-size-small    : 12px;
@scorebar-font-size          : 14px;
@scorebar-font-size-large    : 16px;
@scorebar-bg                 : #f5f5f5;
@scorebar-brown-color        : #d0ba94;
@scorebar-info-color         : #7dc1c4;
@scorebar-success-color      : #75a24d;
@scorebar-danger-color       : #ff8f70;

// mixins
.scorebar-size(@font-size) {
  &.@{scorebar-prefix-cls} {
    height: @font-size * 2;
    padding-right: @font-size * 6;
    font-size: @font-size;
  }
  .@{scorebar-prefix-cls}__left {
    width: @font-size * 3;
    padding-right: @font-size * 0.5;
    font-size: @font-size;
    .xvu-iconfont {
      font-size: @font-size * 1.25;
    }
  }
  .@{scorebar-prefix-cls}__right {
    &_slider {
      width: @font-size * 6;
      height: calc(100% + @font-size / 3);
      padding-left: @font-size * 0.5;
      &::before,
      &::after {
        height: calc(100% - @font-size / 3);
      }
      &::before {
        left: 0;
        top: @font-size / 3;
      }
      &::after {
        left: @font-size / 3;
        top: 0;
      }
    }
  }
}
.scorebar-color(@color) {
  &.@{scorebar-prefix-cls} {
    border-bottom-color: @color;
  }
  .@{scorebar-prefix-cls}__left {
    &::before {
      background-color: @color;
    }
  }
  .@{scorebar-prefix-cls}__middle {
    color: @color;
  }
  .@{scorebar-prefix-cls}__right {
    &_slider {
      &::before,
      &::after {
        background-color: @color;
      }
    }
  }
}

// styles - default
.@{scorebar-prefix-cls} {
  display: flex;
  width: 100%;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  line-height: 2;
  background-color: @scorebar-bg;
  .scorebar-size(@scorebar-font-size);
  .scorebar-color(@default-color);
  &__left {
    .flex-center;
    color: #fff;
    position: relative;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transform-origin: center bottom;
      transform: skewX(30deg);
    }
    .xvu-iconfont {
      position: relative;
    }
  }
  &__middle {
    min-width: 4em;
    text-align: center;
  }
  &__right {
    flex-grow: 1;
    position: relative;
    &_slider {
      position: absolute;
      left: 0;
      top: 0;
      color: #fff;
      transition: all .5s ease;
      .flex-center;
      overflow: hidden;
      &_text {
        position: relative;
        z-index: 2;
      }
      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        transform-origin: center top;
        transform: skewX(210deg);
      }
      &::before {
        opacity: .3;
      }
    }
  }
}

// styles - more
.@{scorebar-prefix-cls} {
  &-small {
    .scorebar-size(@scorebar-font-size-small);
  }
  &-large {
    .scorebar-size(@scorebar-font-size-large);
  }
  &-brown {
    .scorebar-color(@scorebar-brown-color);
  }
  &-primary {
    .scorebar-color(@primary-color);
  }
  &-success {
    .scorebar-color(@scorebar-success-color);
  }
  &-warning {
    .scorebar-color(@warning-color);
  }
  &-danger {
    .scorebar-color(@scorebar-danger-color);
  }
  &-info {
    .scorebar-color(@scorebar-info-color);
  }
}
